<template>
  <div class="detail-box">
    <div class="first">
      <img class="title" src="/images/jinghe/right/竞合详情@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <tabList :poptitle=titleList :popdata="jzList"  :itemStyle="itemStyle" v-if="!nodata" style="padding-top: 33px;"/>
        <!-- <div v-else> -->
          <div v-else class="nodata">暂无数据</div>
        <!-- </div> -->
        <verdict :poptext="jlList"/>
      </div>
    </div>
    <div class="first second">
      <img class="title" src="/images/jinghe/right/宁波概况@2x.png">
      <div class="firstContent">
        <gaikuang2 :gkData="gkData"></gaikuang2>
        <verdict :poptext="jlList2" />
      </div>
</div>
  </div>
</template>

<script>
// import tabList from '../components/tabList'
// import verdict from '../components/verdict'
import gaikuang2 from './components/gaikuang2.vue'
import verdict from '../components/verdict'
import tabList from '../components/tabList'

export default {
  data () {
    return {
      titleList:['名称', '省份', '竞合关系数', '专利数'],
      jzList:[],
      hzList:[],
      // jlList:'',
      jlList:'',

      itemStyle: {
        '--center': "left",
        '--color': "rgba(0, 203, 255, 1)",
        '--width1': "118px",
        // '--width2': "60px"

      },
      cyljb: '',
      gkData: {},
      jlList2: "",
      nodata: false,
      time: "2020.12",
    }
  },
  props: {
    // cyljb: {
    //   type: [String, Number],
    //   default: '上游'
    // }
  },
  components: { gaikuang2, verdict, tabList },
  mounted() {
    this.xfly = this.$route.query.xfly
    this.cyljb = this.$route.query.cyljb
  	this.getList3()
    this.getTime()
  },
  methods: {
   async getList3(){
    this.jzList = []
    console.log('right3: ', this.cyljb, this.xfly)
    let x = await this.$api.get('/es/jsc/cyjh_detail_cyljb',{industry: this.cyljb, xfhy: this.xfly})
    let mydata
    if(x.status == 200){
      mydata = x.data['企业列表']
      this.gkData = x.data["宁波概况"]
      this.jlList = x.data["侧图1结论"]
      this.jlList2 = x.data["侧图2结论"]
      if(mydata.length==0){
        this.nodata = true
        return
      }
      this.nodata = false
      mydata.forEach(element => {
        this.jzList.push({
          name: element[0],
          dataList: [element[1]].concat(element.slice(3,5)),
          allData: element
        })
      })
    }
    // console.log(this.jzList)
    },
    async getTime(){
      let {data} = await this.$api.get("/es/jsc/get_time")
      this.time = data["统计时间"].split('.').splice(0,2).join('.')
    }
  },
  watch: {
    '$route.query.xfly': function () {
      // console.log('------- ',this.$route.query.cyljb)
      this.xfly = this.$route.query.xfly
      this.getList3()
    },
    '$route.query.cyljb': function () {
      // console.log('------- ',this.$route.query.cyljb)
      this.cyljb = this.$route.query.cyljb
      this.getList3()
    }
  }
  }
</script>

<style lang="stylus" scoped>
.detail-box{
  // padding: 0 10px;
  display: flex;
  height: 100%;
  flex-direction: column;
  font-family: SourceHanSansCN-Regular !important;
  .title {
    height: 43px;
    margin-bottom: -5px;
    // margin-bottom: 9px;
  }
  .first {
    // width: 389px;
    // background-color: rgba(3, 16, 38, 0.7100);
    .firstContent{
      background-color: rgba(3, 16, 38, 0.7100);
      position: relative;
      // width 389px;
      padding: 0 18px;
      border-radius: 10px;
      margin 0 auto;
      // padding-bottom: 10px;
      padding-bottom: 28px;

    }
  }
  .second {
    margin-top 10px;
  }
  li {
    position: absolute;
    top: 0px;
    right: 18px;
    display: inline-block;
    // width: 132px;
    height: 15px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 31px;
    color: #b7b7b7;

    opacity: 1;
  }
}
.nodata {
  // position: absolute;
  // top: 30px;
  // left: 130px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 24px;
  letter-spacing: 9px;
  opacity: 0.8;
  width: 373px;
  height: 350px;
  line-height: 350px;

}
</style>
